<template>
  <div class="game-container" @keydown="handleKeyDown" @click="handleClick" tabindex="0">

    <div class="map-0" v-for="i in map" :key="i">
      <div  v-for="j in i" :key="j">
        <div class="map" :style="{ top: j.top + 'px', left: j.left + 'px',backgroundColor: j.colour }" >
        </div>
      </div>
    </div>

    <div class="message"  :style="{ top: lead.m_t+ 'px', left:  lead.m_l+ 'px' }">
        {{ lead.message }}
    </div>

    <audio ref="audioPlayer" loop >
      <source src="/snowy.ogg" type="audio/ogg">
    
    </audio>
    <audio ref="audioPlayer_rainbow" >
      <source src="/乱码声彩.ogg" type="audio/ogg">

    </audio>
    <audio ref="audioPlayer_end" >
      <source src="/dogsong.ogg" type="audio/ogg">

    </audio>
    <audio ref="audioPlayer_green" >
      <source src="/dogappear.ogg" type="audio/ogg">
  
    </audio>
    <audio ref="audioPlayer_yellow" >
      <source src="/触电.ogg" type="audio/ogg">

    </audio>
    <audio ref="audioPlayer_ding" >
      <source src="/叮.ogg" type="audio/ogg">
     
    </audio>
    <audio ref="audioPlayer_dong" >
      <source src="/咚.ogg" type="audio/ogg">

    </audio>
    <audio ref="audioPlayer_jiu" >
      <source src="/啾.ogg" type="audio/ogg">
  
    </audio>
    <audio ref="audioPlayer_fail" >
      <source src="/失败.ogg" type="audio/ogg">
    
    </audio>
    <audio ref="audioPlayer_ca" >
      <source src="/嚓.ogg" type="audio/ogg">
   
    </audio>
    <audio ref="audioPlayer_walk" >
      <source src="/走路.ogg" type="audio/ogg">

    </audio>

    <div v-show="maprule.manual">
      <img src="../public/rule.PNG" class="rule" />
    </div>

    <div  class="message" v-show="lead.true"   :style="{top: statetop + 'px', left: stateleft + 'px'}">
      <img src="/heart.png" class="image-size-state" />
      <span>{{ " "+lead.life +"    "}}</span>
      <img src="/foot.png" class="image-size-state"/>
      <span>{{ " "+lead.pace }}</span>
    </div>

    <div class="character" :style="{ top: characterTop + 'px', left: characterLeft + 'px' }">
      <img v-if="lead.dir==='die'" src="/tobydog/fail.png" class="image-size-wsad" />
      <img v-if="lead.dir==='n'" src="/tobydog/n.png" class="image-size-n" />
      <img v-if="lead.dir==='c'" src="/tobydog/c.png" class="image-size-n" />
      <div v-if="lead.dir==='w'">
        <div v-if="lead.hat===false">
          <img v-if="lead.orange===true" src="/tobydog/ow.png" class="image-size-wsad"/>
          <img v-else-if="lead.lemon===true" src="/tobydog/lw.png" class="image-size-wsad"/>
          <img v-else src="/tobydog/w.png" class="image-size-wsad"/>
        </div>
        <div v-if="lead.hat===true">
          <img v-if="lead.orange===true" src="/tobydog/how.png" class="image-size-wsad"/>
          <img v-else-if="lead.lemon===true" src="/tobydog/hlw.png" class="image-size-wsad"/>
          <img v-else src="/tobydog/hw.png" class="image-size-wsad"/>
        </div>
      </div>
      <div v-if="lead.dir==='s'">
        <div v-if="lead.hat===false">
          <img v-if="lead.orange===true" src="/tobydog/os.png" class="image-size-wsad"/>
          <img v-else-if="lead.lemon===true" src="/tobydog/ls.png" class="image-size-wsad"/>
          <img v-else src="/tobydog/s.png" class="image-size-wsad"/>
        </div>
        <div v-if="lead.hat===true">
          <img v-if="lead.orange===true" src="/tobydog/hos.png" class="image-size-wsad"/>
          <img v-else-if="lead.lemon===true" src="/tobydog/hls.png" class="image-size-wsad"/>
          <img v-else src="/tobydog/hs.png" class="image-size-wsad"/>
        </div>
      </div>
      <div v-if="lead.dir==='a'">
        <div v-if="lead.hat===false">
          <img v-if="lead.orange===true" src="/tobydog/oa.png" class="image-size-wsad"/>
          <img v-else-if="lead.lemon===true" src="/tobydog/la.png" class="image-size-wsad"/>
          <img v-else src="/tobydog/a.png" class="image-size-wsad"/>
        </div>
        <div v-if="lead.hat===true">
          <img v-if="lead.orange===true" src="/tobydog/hoa.png" class="image-size-wsad"/>
          <img v-else-if="lead.lemon===true" src="/tobydog/hla.png" class="image-size-wsad"/>
          <img v-else src="/tobydog/ha.png" class="image-size-wsad"/>
        </div>
      
      </div>
      <div v-if="lead.dir==='d'">
        <div v-if="lead.hat===false">
          <img v-if="lead.orange===true" src="/tobydog/od.png" class="image-size-wsad"/>
          <img v-else-if="lead.lemon===true" src="/tobydog/ld.png" class="image-size-wsad"/>
          <img v-else src="/tobydog/d.png" class="image-size-wsad"/>
        </div>
        <div v-if="lead.hat===true">
          <img v-if="lead.orange===true" src="/tobydog/hod.png" class="image-size-wsad"/>
          <img v-else-if="lead.lemon===true" src="/tobydog/hld.png" class="image-size-wsad"/>
          <img v-else src="/tobydog/hd.png" class="image-size-wsad"/>
        </div>
      </div>
    </div>
  </div>
</template>

<style>
.map{
  position: absolute;
  width: 6vh;
  height: 6vh;
  border: 2px solid rgb(209, 219, 252);
}
.map-0{
  width:  75.6vh;
  height: 44.1vh;
}
.rule{
  position: absolute;
  width:  36vh;
  height: 47.7vh;
  top: 29.7vh;
  left:58.5vh;
}
.game-container {
  position: relative;
  width: 153vh;
  height: 90vh;
  outline: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 5px solid rgb(185, 95, 54);
  background-color: rgb(228,234,252);
  background-image: url("/背景低.PNG"); /* 背景图片路径 */
  background-size: cover;
  background-repeat: no-repeat;
}
.character {
  position: absolute;
}
.image-size-n{
  width: 9vh;
  height: 6.3vh;
}
.image-size-wsad{
  width: 6.3vh;
  height: 6.3vh;
}
.message{
  position: absolute;
  font-size: 100%;
}
.image-size-state{
  width: 3.6vh;
  height: 3.6vh;
}
</style>

<script>

let viewportWidth = window.innerWidth || document.documentElement.clientWidth;
let viewportHeight = window.innerHeight || document.documentElement.clientHeight;

let distanceInVh = 6.3 * viewportHeight / 100;
let distanceInVw_character = 3 * distanceInVh;
let distanceInVh_character = 8 * distanceInVh;

let distanceInVw_map = 5 * distanceInVh;
let distanceInVh_map = 4 * distanceInVh;

let wb=5 * distanceInVh;
let sb=10 * distanceInVh;
let ab=4 * distanceInVh;
let db=90 * distanceInVh;

let mt=27*viewportHeight / 100;
let ml=63.9*viewportHeight / 100;

let st=27*viewportHeight / 100;
let sl=6*distanceInVh;

let mbt=5 * distanceInVh;
let mbl=6 * distanceInVh;

let canmove=false;
let endless=false;
let endogg=false;
let overtrue=true;
let key=true;
let gametrue=false;


export default {
  data() {
    return {
      characterTop: distanceInVh_character,
      characterLeft: distanceInVw_character+1,
      lead:{
        pace: 0,
        life: 3,
        dir:"n",
        x: 3,
        y: -3,
        orange: false,
        lemon: false,
        hat: false,
        fire: false,
        green: true,
        fail: false,
        message: '',
        m_t: mt,
        m_l: ml,
        true: false,
      },
      maprule: {
        row: 7,
        col: 14,
        top: distanceInVh_map,
        left: distanceInVw_map,
        manual:false,
        greentrue:false,
      },
      map:[],
      row:[],
      rainbow:[
        "red","red","red","red","red","red","red","red","red","red","red",
        "yellow","yellow", "yellow","yellow","yellow","yellow", "yellow","yellow","yellow","yellow","yellow",
        "green",
        "orange","orange","orange","orange","orange","orange","orange","orange","orange","orange","orange","orange","orange",
        "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue", "blue","blue",
        "purple","purple","purple","purple","purple","purple","purple","purple","purple","purple","purple","purple","purple",
        "pink","pink","pink","pink","pink","pink","pink","pink","pink","pink","pink","pink","pink","pink",
      ],
      papyrus:[
        "欢迎来到雪镇",
        "在木牌附近按空格，可以看到说明书",
        "相信你会喜欢这个谜题的",
        "如果你看到我的兄弟，记得帮我叫醒他",
        "意面的烹饪方式.......",
        "如果你觉得自己足够厉害，试试按下「c」",
        "这里是一个充满故事的地方",
        "w是上，s是下，a和d是左右，你应该知道的",
        "你似乎没事干？按下x看看",
      ],
      bwcolors: [
        "#bcbcbd",
        "#7d7b7e",
        "#eeeeef",
        "#f1eff3",
        "#b1afb3",
        "#939195",
        "#f0eef1",
        "#e8e6e9",
        "#a6a4a7",
        "#d9d8da",
        "#e8e6e9",
        "#858387",
        "#b1afb3",
        "#b3b0b3",
        "#848285",
        "#8b898c",
        "#beb8c0",
        "#929093",
        "#a19fa2",
        "#edebee",
        "#9a989c",
        "#eae8ec",
        "#b1afb3",
        "#d3d1d4",
        "#cccacd",
        "#7e7c80",
        "#8a888b",
        "#aea8af"
      ],

      audioPlayer: null,
      audioPlayer_end: null,
      audioPlayer_green: null,
      audioPlayer_yellow: null,
      audioPlayer_ding: null,
      audioPlayer_dong: null,
      audioPlayer_jiu: null,
      audioPlayer_fail: null,
      audioPlayer_ca: null,
      audioPlayer_walk: null,
      mapbordertop: mbt,
      mapborderleft: mbl,
      statetop: st,
      stateleft: sl,
    };
  },
  mounted() {
    this.$el.focus(); // 获取焦点，以便监听键盘事件
    this.initbwmap(); 
    this.audioPlayer = this.$refs.audioPlayer;
    this.audioPlayer_end = this.$refs.audioPlayer_end;
    this.audioPlayer_green = this.$refs.audioPlayer_green;
    this.audioPlayer_yellow = this.$refs.audioPlayer_yellow;
    this.audioPlayer_ding = this.$refs.audioPlayer_ding;
    this.audioPlayer_dong = this.$refs.audioPlayer_dong;
    this.audioPlayer_jiu = this.$refs.audioPlayer_jiu;
    this.audioPlayer_fail = this.$refs.audioPlayer_fail;
    this.audioPlayer_ca = this.$refs.audioPlayer_ca;
    this.audioPlayer_walk = this.$refs.audioPlayer_walk;
    this.audioPlayer_walk.load();
    this.audioPlayer.volume = 0.5;
    this.audioPlayer_yellow.volume = 0.5;
    this.audioPlayer_ding.volume=0.5;
  },
  created() {
    window.addEventListener('resize', ()=> {
     location.reload();
    });
  },
  methods: {
    getColorFromArray() {
    const randomIndex=Math.floor(Math.random()*this.bwcolors.length)
    const color=this.bwcolors[randomIndex];
    return color;
    },
    getrColor() {
    const randomIndex=Math.floor(Math.random()*this.rainbow.length)
    const color=this.rainbow[randomIndex];
    return color;
    },
    initrmap(){
      let ttop=this.maprule.top;
      for(let i=0;i<this.maprule.row;i++){
        this.map[i]=[];
        ttop+=distanceInVh;
        let tleft=this.maprule.left;
        for(let j=0;j<this.maprule.col;j++){
          const color=this.getrColor();
          tleft+=distanceInVh;
          this.map[i][j]={
            colour: color,
            top: ttop,
            left: tleft,
            green: true,
          }
        }
      }
    },
    initbwmap(){
      let ttop=this.maprule.top;
      for(let i=0;i<this.maprule.row;i++){
        this.map[i]=[];
        ttop+=distanceInVh;
        let tleft=this.maprule.left;
        for(let j=0;j<this.maprule.col;j++){
          const color=this.getColorFromArray();
          tleft+=distanceInVh;
          this.map[i][j]={
            colour: color,
            top: ttop,
            left: tleft,
          }
        }
      }
    },
     print() {
      // 打印二维数组的值
      console.log(this.map);
    },
    handleClick(event) {
      this. audioPlayer.play();
      this.lead.message='用wsad控制方向，在木牌边按空格看点东西';
      event.target.focus();
    },
    handleKeyDown(event) {
      canmove=true;
      let rtemp = 1;
      const executeInitrmap = () => {
        if (rtemp <= 12) {
          this.initrmap();
          rtemp++;
          setTimeout(executeInitrmap, 100); // 延时0.2秒（200毫秒）
        }
      };
      if(this.lead.y>this.maprule.col-10&&endless){
        this.maprule.col+=3;
        let ttop=this.maprule.top;
        for(let i=0;i<this.maprule.row;i++){
          ttop+=distanceInVh;
          let tleft=this.maprule.left;
          for(let j=0;j<this.maprule.col;j++){
            const color=this.getrColor();
            tleft+=distanceInVh;
            if(this.maprule.col-3<=j&&j<this.maprule.col){
              this.map[i][j]={
                colour: color,
                top: ttop,
                left: tleft,
                green: true,
              }
            }
          }
        }
      }
      if(key&&!this.lead.fail){
        if(!this.lead.true||(this.lead.y<0||this.lead.y>=this.maprule.col)){
          this.audioPlayer_walk.currentTime = 0;
          this.audioPlayer_walk.play();
          const randomIndex=Math.floor(Math.random()*this.papyrus.length);
          this.lead.message=this.papyrus[randomIndex];
         }
        switch (event.key) {
          case 'w':
          case 'W':
            if(this.characterTop>=wb){
              this.lead.x--;
              if(gametrue&&this.lead.x<0){canmove=false;key=true;}
              this.lead.dir="w";
              if(0<=this.lead.x&&this.lead.x<this.maprule.row&&0<=this.lead.y&&this.lead.y<this.maprule.col){
              this.move(this.map[this.lead.x][this.lead.y].colour);
              }
              if(canmove){
                this.characterTop -= distanceInVh; // 按下 'w' 键，向上移动
              }
              else{
                this.audioPlayer_dong.currentTime = 0;
                this. audioPlayer_dong.play();
                this.lead.x++;
              }
            }else{key=true;}
            break;
          case 's':
          case 'S':
            if(this.characterTop<=sb){
              this.lead.x++;
              if(gametrue&&this.lead.x>=this.maprule.row){canmove=false;key=true;}
              this.lead.dir='s';
              if(0<=this.lead.x&&this.lead.x<this.maprule.row&&0<=this.lead.y&&this.lead.y<this.maprule.col){
              this.move(this.map[this.lead.x][this.lead.y].colour);
              }
             
              if(canmove){
                this.characterTop += distanceInVh; // 按下 's' 键，向下移动
              }
              else{
                this.audioPlayer_dong.currentTime = 0;
                this.audioPlayer_dong.play();
                this.lead.x--;
              }
            }else{key=true;}
            
            break;
          case 'a':
          case 'A':
            if(this.characterLeft>=ab){
              this.lead.y--;
              if(gametrue&&this.lead.y<0){ canmove=false;key=true;}
              this.lead.dir='a';
              if(0<=this.lead.x&&this.lead.x<this.maprule.row&&0<=this.lead.y&&this.lead.y<this.maprule.col){
              this.move(this.map[this.lead.x][this.lead.y].colour); 
              }
              if(canmove){
                this.characterLeft -= distanceInVh; // 按下 'a' 键，向左移动
              }
              else{
                this.audioPlayer_dong.currentTime = 0;
                this. audioPlayer_dong.play();
                this.lead.y++;
              }
            }else{key=true;}
            break;
          case 'd':
          case 'D':
            this.lead.y++;
            if(gametrue&&this.lead.y>=this.maprule.col){key=true;}
            this.lead.dir='d';
            if(0<=this.lead.x&&this.lead.x<this.maprule.row&&0<=this.lead.y&&this.lead.y<this.maprule.col){
              this.move(this.map[this.lead.x][this.lead.y].colour);
            }
            if(canmove){
              this.characterLeft += distanceInVh; // 按下 'd' 键，向右移动
            }
            else{
              this.audioPlayer_dong.currentTime = 0;
              this. audioPlayer_dong.play();
              this.lead.y--;
            }
            break;
          case ' ':
            if(!this.maprule.manual){
              if(this.lead.x==0&&(this.lead.y==-1||this.lead.y==-2)){
                this.audioPlayer_ding.currentTime = 0;
                this. audioPlayer_ding.play();
                this.maprule.manual=true;
                this.lead.message='是的，说明书';
              }
            }else{
              this.lead.message='';
              this.audioPlayer_dong.currentTime = 0;
              this. audioPlayer_dong.play();
              this.maprule.manual=false;
              this.lead.message='希望你看懂了';
            }
            this.lead.dir='n';
            break;
          case 'x':
          case 'X':
            this.lead.message='游戏正式开始';
            this.maprule.manual=false;
            this.characterTop=distanceInVh_character;
            this.characterLeft=distanceInVw_character;
            this.lead.x=3;
            this.lead.y=-3;
            this.lead.pace=0;
            this.lead.life=3;
            this.lead.dir='n';
            this.lead.orange=false;
            this.lead.lemon=false;
            this.lead.hat=false;
            this.lead.fire= false;
            this.lead.green=true;
            this.lead.true=true;
            this.maprule.col=14;
            this.maprule.greentrue=false;
            const audioPlayer_rainbow = this.$refs.audioPlayer_rainbow;
            audioPlayer_rainbow.currentTime = 0;
            audioPlayer_rainbow.play();
            endogg=true;
            key=false;
            executeInitrmap();
            setTimeout(() => {
              key=true;
              }, 1000);
            break;
          case 'z':
          case 'Z':
            this.print();
            break;
          case 'c':
          case 'C':
              if(this.lead.y<0){
                this.lead.message='哦？你即将经历无尽的折磨';
                this.maprule.manual=false;
                const audioPlayer_rainbow = this.$refs.audioPlayer_rainbow;
                audioPlayer_rainbow.currentTime = 0;
                audioPlayer_rainbow.play();
                this.characterTop=distanceInVh_character;
                this.characterLeft=distanceInVw_character;
                this.lead.x=3;
                this.lead.y=-3;
                this.lead.pace=0;
                this.lead.life=3;
                this.lead.dir='c';
                this.lead.orange=false;
                this.lead.lemon=false;
                this.lead.hat=false;
                this.lead.fire= false;
                this.lead.green=true;
                this.lead.true=true;
                this.maprule.col=16;
                this.maprule.greentrue=true;
                endogg=true;
                key=false;
                executeInitrmap();
                setTimeout(() => {
                  key=true;
                  }, 1000);
                this.audioPlayer_ding.play();
                endless=true;
                break;
              }
        }
        if(overtrue){
          this.audioPlayer.play();

          overtrue=false;
        }
        if(this.lead.y>=this.maprule.col&&!endless&&endogg){
          this.audioPlayer.pause();
          this.audioPlayer_end.play();
          console.log('你到达了终点');
          this.lead.message='你到达了终点';
          this.lead.true=false;
          this.lead.life=-1;
          setTimeout(() => {
            this.lead.message='';
            this. audioPlayer.play();
              }, 36000);
          endogg=false;
        }
        if(this.lead.y<this.maprule.col){
          this.audioPlayer_end.pause();
          this. audioPlayer.play();
        }
        if(this.lead.y>=0&&endogg)
        {
          gametrue=true;
        }
        if(this.lead.y>this.maprule.col)
        {
          gametrue=false;
        }
        if(this.lead.life==0)
        {
          this.lead.message='没事的，你有足够的理由回家';
          console.log('没事的，你有足够的理由回家');
          this.lead.fail=true;
          this.lead.dir='die';
          this.audioPlayer.pause();
          setTimeout(() => {
            this.audioPlayer_fail.play();
              }, 1000);
          setTimeout(() => {
            this.lead.message='';
            this.audioPlayer.play();
            this.characterTop=distanceInVh_character;
            this.characterLeft=distanceInVw_character;
            this.lead.x=3;
            this.lead.y=-3;
            this.lead.pace=0;
            this.lead.life=3;
            this.lead.dir='n';
            this.lead.orange=false;
            this.lead.lemon=false;
            this.lead.fail=false;
            this.lead.hat=false;
            this.lead.fire= false;
            this.lead.green=true;
            this.lead.true=true;
            this.maprule.col=20;
            gametrue=false;
              }, 7000);
        }
      }
    },

    move(colour){
      this.lead.pace++;
      if(colour==='purple'){
          key=false;
        }
        else{
          key=true;
        }
      switch(colour){
          case 'red':
          canmove=false;
          this.lead.pace--;
          this.lead.message='看样子红色是行不通的';
          console.log('禁止通行!');
          break;
          case 'yellow':
          this.audioPlayer_yellow.currentTime = 0;
          this. audioPlayer_yellow.play();
            this.lead.life--;
            this.lead.fire=true;
            key=false;
            setTimeout(() => {
              key=true;
            }, 500);
            this.lead.message='哦，你触电了';
            console.log('触电','life:',this.lead.life);
            break;
          case 'green':
            if((this.maprule.greentrue&&this.map[this.lead.x][this.lead.y].green)||(this.lead.green&&!this.lead.lemon)){
              this.map[this.lead.x][this.lead.y].green=false;
              this.lead.life++;
              this.lead.hat=true;
              this.lead.green=false;
              this. audioPlayer_green.play();
              key=false;
              setTimeout(() => {
                key=true;
              }, 2000);
              this.lead.message='你看上去时髦极了';
              console.log('你看上去很时髦');
            }else{
              this.lead.message='不好意思，我不能给你帮助';
              this. audioPlayer_dong.play();
            }
           
            break;
          case 'orange':
            if(!this.lead.orange){
              this.audioPlayer_ding.currentTime = 0;
            this. audioPlayer_ding.play();
            }
            this.lead.orange=true;
            this.lead.lemon=false;
            this.lead.message='你闻起来像橙子';
            console.log('你闻起来像橙子');
            break;
          case 'blue':
            this.lead.hat=false;
            if(!this.lead.orange&&!this.lead.lemon&&!this.yellowmove()){
              this.audioPlayer_jiu.currentTime = 0;
              this.audioPlayer_jiu.play();
              this.lead.message='你正在游泳';
              console.log('你正在游泳');
            }
            if(this.lead.orange&&!this.yellowmove()){
             this.lead.life--;
             this.audioPlayer_ca.currentTime = 0;
             this.audioPlayer_ca.play();
             this.lead.message='看起来食人鱼很喜欢你';
             console.log('食人鱼很喜欢你','life:',this.lead.life);
            }
            if(this.lead.lemon&&!this.yellowmove()){
              this.audioPlayer_jiu.currentTime = 0;
              this.audioPlayer_jiu.play();
              this.lead.message='嘿，食人鱼希望你赶快离开';
             console.log('食人鱼希望你快点离开','life:',this.lead.life);
            }
            if(this.yellowmove()){
              this.audioPlayer_yellow.currentTime = 0;
              this. audioPlayer_yellow.play();
              this.lead.life--;
              key=false;
              setTimeout(() => {
                key=true;
              }, 500);
              if(this.lead.orange){
                this.lead.message='烤橙子的味道，食人鱼对你带来的佳肴表示感谢';
                console.log('烤橙子的味道，食人鱼对你带来的佳肴表示感谢','life:',this.lead.life);
              }
              else if(this.lead.lemon){
                this.lead.message='炸柠檬的味道，食人鱼希望你这颗老鼠屎尽快远离它们的池塘';
                console.log('炸柠檬的味道，食人鱼希望你这颗老鼠屎尽快远离它们的池塘','life:',this.lead.life);
              }
              else{
                this.lead.message='有电的地方不要下水，你妈咪没告诉你吗';
                console.log('有电的地方不要下水');
              }
            }
            this.lead.orange=false;
            this.lead.lemon=false;
            break;
          case 'purple':
            if(!this.lead.lemon){
              this.audioPlayer_ding.currentTime = 0;
              this. audioPlayer_ding.play();
              
            }
            this.lead.lemon=true;
            this.lead.orange=false;
            setTimeout(() => {
              this.purplemove();
            }, 300);
            this.lead.message='小心柠檬味的肥皂';
            console.log('小心柠檬味的肥皂');
            break;
          case 'pink':
          this.audioPlayer_walk.currentTime = 0;
          this.audioPlayer_walk.play();
         // this. audioPlayer_dong.play();
          this.lead.message='非常安全';
            console.log('非常安全');
          break;
          case 'default':
          // 什么都不做
          break;
          default:
      }
    },
    yellowmove(){
      if((0<=this.lead.x-1&&this.lead.x-1<this.maprule.row&&0<=this.lead.y&&this.lead.y<this.maprule.col)&&this.map[this.lead.x-1][this.lead.y].colour==='yellow'){return true;}
      else if((0<=this.lead.x+1&&this.lead.x+1<this.maprule.row&&0<=this.lead.y&&this.lead.y<this.maprule.col)&&this.map[this.lead.x+1][this.lead.y].colour==='yellow'){return true;}
      else if((0<=this.lead.x&&this.lead.x<this.maprule.row&&0<=this.lead.y-1&&this.lead.y-1<this.maprule.col)&&this.map[this.lead.x][this.lead.y-1].colour==='yellow'){return true;}
      else if((0<=this.lead.x&&this.lead.x<this.maprule.row&&0<=this.lead.y+1&&this.lead.y+1<this.maprule.col)&&this.map[this.lead.x][this.lead.y+1].colour==='yellow'){return true;}
      else{return false;}
    },
    purplemove(){
      switch (this.lead.dir) {
        case 'w':
          if(this.characterTop>=wb){
            this.lead.x--;
            if(gametrue&&this.lead.x<0){canmove=false;key=true;}
            if(0<=this.lead.x&&this.lead.x<this.maprule.row&&0<=this.lead.y&&this.lead.y<this.maprule.col){
             this.move(this.map[this.lead.x][this.lead.y].colour);
            }
            if(canmove){
              this.characterTop -= distanceInVh; // 按下 'w' 键，向上移动
              this.lead.dir="w";
            }
            else{
              this.audioPlayer_dong.currentTime = 0;
              this. audioPlayer_dong.play();
              this.lead.x++;
            }
          }else{key=true;}
          break;
        case 's':
          if(this.characterTop<=sb){
            this.lead.x++;
            if(gametrue&&this.lead.x>=this.maprule.row){canmove=false;key=true;}
            if(0<=this.lead.x&&this.lead.x<this.maprule.row&&0<=this.lead.y&&this.lead.y<this.maprule.col){
             this.move(this.map[this.lead.x][this.lead.y].colour);
            }
            if(canmove){
              this.characterTop += distanceInVh; // 按下 's' 键，向下移动
              this.lead.dir='s';
            }
            else{
              this.audioPlayer_dong.currentTime = 0;
              this. audioPlayer_dong.play();
              this.lead.x--;
            }
          }else{key=true;}
          
          break;
        case 'a':
          if(this.characterLeft>=ab){
            this.lead.y--;
            if(gametrue&&this.lead.y<0){canmove=false;key=true;}
            if(0<=this.lead.x&&this.lead.x<this.maprule.row&&0<=this.lead.y&&this.lead.y<this.maprule.col){
             this.move(this.map[this.lead.x][this.lead.y].colour);
            }
            if(canmove){
              this.characterLeft -= distanceInVh; // 按下 'a' 键，向左移动
              this.lead.dir='a';
            }
            else{
              this.audioPlayer_dong.currentTime = 0;
              this. audioPlayer_dong.play();
              this.lead.y++;
            }
          }else{key=true;}
          break;
        case 'd':
          this.lead.y++;
          if(gametrue&&this.lead.y>=this.maprule.col){key=true;}
          if(0<=this.lead.x&&this.lead.x<this.maprule.row&&0<=this.lead.y&&this.lead.y<this.maprule.col){
             this.move(this.map[this.lead.x][this.lead.y].colour);
          }
          if(canmove){
            this.characterLeft += distanceInVh; // 按下 'd' 键，向右移动
            this.lead.dir='d';
          }
          else{
            this.audioPlayer_dong.currentTime = 0;
            this. audioPlayer_dong.play();
            this.lead.y--;
          }
          break;
      }
      if(this.lead.y>=this.maprule.col&&!endless&&endogg){
        this.audioPlayer.pause();
        this.audioPlayer_end.play();
        console.log('你到达了终点');
        this.lead.message='你滑向了胜利';
        this.lead.true=false;
        this.lead.life=-1;
        setTimeout(() => {
          this. audioPlayer.play();
            }, 36000);
        endogg=false;
      }
      if(this.lead.y>=0)
        {
          gametrue=true;
        }
        if(this.lead.y>this.maprule.col)
        {
          gametrue=false;
        }
        if(this.lead.life==0)
        {
          console.log('没事的，你有足够的理由回家');
          this.lead.message='看来紫色不是一件好事';
          this.lead.fail=true;
          this.lead.dir='die';
          this.audioPlayer.pause();
          setTimeout(() => {
            this.audioPlayer_fail.play();
              }, 1000);
          setTimeout(() => {
            this.audioPlayer.play();
            this.characterTop=distanceInVh_character;
            this.characterLeft=distanceInVw_character;
            this.lead.x=3;
            this.lead.y=-3;
            this.lead.pace=0;
            this.lead.life=3;
            this.lead.dir='n';
            this.lead.orange=false;
            this.lead.lemon=false;
            this.lead.fail=false;
            this.lead.hat=false;
            this.lead.fire= false;
            this.lead.green=true;
            this.lead.true=true;
            this.maprule.col=20;
            gametrue=false;
              }, 7000);
        }
    }
  }
};
</script>
